<%--
  @desc: 系统用户列表
  @author: chenw
  @create: 2014-5-26 AM 11:44
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style type="text/css">
    .keywords {
        width: 250px;
        font-family: '微软雅黑', sans-serif, serif;
    }
</style>
<div class="pageHeader">
    <form rel="pageForm" onsubmit="return navTabSearch(this);" action="<c:url value='/sys/file/list'/>" method="post">
        <div class="searchBar">
            <ul>
                <li style="float: left;line-height: 25px;">
                    <label style="width: 50px;">关键字：</label> <input name="keywords" type="text" value="${query.keywords}" placeholder="请输入文件名进行检索" class="keywords"/>
                </li>
                <li>
                    <div class="buttonActive" style="margin-left: 5px;">
                        <div class="buttonContent">
                            <button type="submit">查找</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </form>
</div>
<div class="pageContent" style="padding-top: 1px;">
    <div class="panelBar">
        <ul class="toolBar" style="float: left;display: inline-block;">
            <li><a class="edit" href="<c:url value='/sys/file/view/{sel_id}'/>" target="dialog" width="520" height="280" mask="true" resizable="false"
                    maxable="false" title="查看用户" rel="dlg_sys_user_view"><span>查看</span></a></li>
            <li class="line"></li>
            <li><a class="delete" href="<c:url value='/sys/file/del/{sel_id}'/>" target="ajaxDel" title="是否确认删除当前用户？"><span>删除</span></a></li>
            <li class="line"></li>
        </ul>
    </div>
    <table class="table" width="100%" layoutH="125">
        <thead>
        <tr>
            <th width="40" align="center">序号</th>
            <th width="180">文件名称</th>
            <th width="80">文件大小</th>
            <th width="125" orderField="UPLOAD_TIME" <c:if test='${query.orderField eq "UPLOAD_TIME" }'> class="${query.orderDirection}"</c:if>>上传日期
            </th>
            <th>备注信息</th>
            <th width="100">文件类型</th>
            <th>扩展信息</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="file" items="${pager.list}" varStatus="vs">
            <tr target="sel_id" rel="${file.id}">
                <td>${vs.count+(pager.pageNum-1)*pager.numPerPage}</td>
                <td onclick="viewImage(this,'${downloadPrefix}/${file.path}','${file.catalog}');">${file.name}</td>
                <td><fmt:formatNumber value="${file.size/1024/1024}" pattern="#0.00"/> Mb</td>
                <td><fmt:formatDate value="${file.uploadTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                <td>${file.remark}</td>
                <td>${fn:replace(file.fileType, "application/", "")}</td>
                <td>${file.catalog}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="panelBar">
        <div class="pages">
            <span>显示&nbsp;</span> <label for="cob_ps"></label><select id="cob_ps" class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="200">200</option>
        </select> <span id="testspan">条，共${pager.total}条</span>
        </div>
        <div class="pagination" targetType="navTab" totalCount="${pager.total}" numPerPage="${pager.numPerPage}" pageNumShown="10"
                currentPage="${pager.pageNum}"></div>
    </div>
    <form id="pagerForm" method="post" action="<c:url value='/sys/file/list'/>">
        <input type="hidden" name="pageNum" value="${pager.pageNum}"/> <input type="hidden" name="keywords" value="${query.keywords}"/> <input type="hidden" name="numPerPage"
            value="${pager.numPerPage}"/> <input type="hidden" name="orderField" value="${query.orderField}"/> <input type="hidden" name="orderDirection"
            value="${query.orderDirection}"/>
    </form>
</div>
<div id="pic_pop">
    <div></div>
    <br><span onclick="closePic();"></span></div>
<style>
    #pic_pop {
        top: 232px;
        left: 177px;
        background-color: rgba(72, 73, 73, 0.8);
        height: 140px;
        border-radius: 4px;
        position: absolute;
        display: none;
    }

    #pic_pop div {
        background-repeat: no-repeat;
        width: 130px;
        height: 130px;
        background-size: 130px;
        margin: 5px;
        position: relative;
    }

    #pic_pop span {
        position: absolute;
        top: 2px;
        background: url("<c:url value='/resource/images/close.png'/>") 0 0 no-repeat;
        background-size: 19px 18px;
        left: 119px;
        display: block;
        height: 18px;
        width: 18px;
    }
</style>
<script type="text/javascript">
    function viewImage(source, url, catalog) {
        var _pop = $("#pic_pop")
        var _pos = $(source).position();
        if (catalog && "icon" == catalog) {
            _pop.find("div").css("background-image", "url(" + url + ")");
            if (!_pop.is(":visible")) {
                _pop.css({"top": _pos.top + 88, "left": _pos.left + 135}).fadeIn(200);
            } else {
                _pop.animate({"top": _pos.top + 88, "left": _pos.left + 135});
            }
        } else {
            if (_pop.is(":visible")) {
                _pop.fadeOut(200);
            }
        }
    }
    function closePic() {
        var _pic_pop = $("#pic_pop");
        if (_pic_pop.is(":visible")) {
            _pic_pop.fadeOut(200);
        }
    }
</script>
